<template>
<div>
  <div class="top">聊天</div>
  <div class="groupAndFriend"
       v-for="(g,index) in groupList"
       :index="index+''"
       :key="index"
       @click="changeColor(index,g)" v-bind:class="{active: isRedIndex === index}">
    {{ g.groupAvatar }}[群]{{ g.groupName }}
  </div>
  <div class="friendView"
        v-for="(f,index) in friendList"
       :index="groupList.length+index+''"
       :key="groupList.length+index"
       @click="changeFriendColor(index,f)" v-bind:class="{active: isColorIndex === groupList.length+index}">
    {{ f.friendRemark }}
  </div>
</div>
</template>

<script>
import { listGroup} from "@/api/reporter/group";
import {listFriend} from "@/api/reporter/friend";

export default {
  name: "FriendAndGroup",
  data(){
    return {
      //群列表数据
      groupList: [],
      friendList: [],
      isRedIndex: -1,
      isColorIndex :-1,
      gList: {},
      fList: {},
    }
  },
  created() {
    this.getList();
    this.getFriendList();
  },
  methods: {
    /** 查询群组列表 */
    getList() {
      this.loading = true;
      listGroup(this.queryParams).then(response => {
        this.groupList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /*查询好友列表*/
    getFriendList() {
      this.loading = true;
      listFriend(this.queryParams).then(response => {
        this.friendList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    changeFriendColor(index,fList) {
      if (this.isColorIndex === this.groupList.length+index) {
        this.isColorIndex = -1;
      } else {
        this.isColorIndex = this.groupList.length+index;
        this.fList = fList;
        this.isRedIndex = -1;
        this.gList=null
      }
      this.$EventBus.$emit('changeFriendColor',this.fList)
    },
    changeColor(index,gList) {
      if (this.isRedIndex === index) {
        this.isRedIndex = -1;
      } else {
        this.isRedIndex = index;
        this.gList = gList;
        this.isColorIndex = -1;
        this.fList=null
      }
      this.$EventBus.$emit('changeColor',this.gList)
    }
  }
}
</script>

<style scoped>
.top{
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-bottom: black 1px solid;
}
.groupAndFriend{
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.friendView{
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.active {
  background-color: #98999D
}
</style>
